<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a {
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 1000px;
        }
    </style>
</head>

<body>

    <div class="a"></div>

    <script>

        // 匀速运动

        var oA = document.querySelector('.a');


        // move(oA, 'top', 500);


        // 正向运动
        // function move(ele, prop, end) {
        //     var t = setInterval(function () {
        //         // 每次都在当前位置的基础上+20
        //         var cur = parseInt(getComputedStyle(oA)[prop]);
        //         cur += 20;
        //         oA.style[prop] = cur + 'px';
        //         if (cur >= end) {
        //             clearInterval(t);
        //             // 万一不能被20整除的时候，强制到达终点
        //             oA.style[prop] = end + 'px';
        //         }
        //     }, 10)
        // }


        // move(oA, 'left', 1000)

        // 反向运动   
        // function move(ele, prop, end) {
        //     var t = setInterval(function () {
        //         // 每次都在当前位置的基础上+20
        //         var cur = parseInt(getComputedStyle(oA)[prop]);
        //         cur -= 20;
        //         oA.style[prop] = cur + 'px';
        //         if (cur <= end) {
        //             clearInterval(t);
        //             // 万一不能被20整除的时候，强制到达终点
        //             oA.style[prop] = end + 'px';
        //         }
        //     }, 10)
        // }


        // move(oA, 'left', 1100, 15)

        // 运动
        //    终点大于当前位置    --- 正向运动   +=20
        // function move(ele, prop, end, speed) {
        //     var t = setInterval(function () {
        //         // console.log(speed);
        //         // 每次都在当前位置的基础上+20
        //         var cur = parseInt(getComputedStyle(oA)[prop]);
        //         // if(end > cur) {
        //         //     cur += 20;
        //         // } else {
        //         //     cur -= 20 ;
        //         // }
        //         speed = end > cur ? speed : -speed;

        //         cur += speed;

        //         oA.style[prop] = cur + 'px';
        //         // 当前位置与终点位置的差值 在 20以内
        //         if (Math.abs(end - cur) <= Math.abs(speed)) {
        //             clearInterval(t);
        //             // 万一不能被20整除的时候，强制到达终点
        //             oA.style[prop] = end + 'px';
        //         }
        //     }, 10)
        // }



        // move(oA, 'left', 1100, 15, function () {
        //     oA.remove()
        // })

        fn();
        // function fn() {
        //     move(oA, 'left', 0, 30, function () {
        //         move(oA, 'left', 1000, 40, function () {
        //             fn();
        //         })
        //     })
        // }
        function fn() {
            move(oA, 'left', 0, 30, function () {
                move(oA, 'left', 1000, 40, fn)
            })
        }



        // 运动结束以后
        function move(ele, prop, end, speed, cb) {
            var cur = parseInt(getComputedStyle(oA)[prop]);
            speed = end > cur ? speed : -speed;
            var t = setInterval(function () {
                console.log(speed);
                // 每次都在当前位置的基础上+20
                cur += speed;

                oA.style[prop] = cur + 'px';
                // 当前位置与终点位置的差值 在 20以内
                if (Math.abs(end - cur) <= Math.abs(speed)) {
                    clearInterval(t);
                    // 万一不能被20整除的时候，强制到达终点
                    oA.style[prop] = end + 'px';

                    // oA.remove();
                    // alert('666');
                    // cb undefined 
                    // if (cb) {
                    //     cb();
                    // }
                    cb && cb();
                }
            }, 10)
        }


        // var n = 3;
        // if(n % 2 === 0) {
        //     alert('偶数')
        // }

        // n % 2 === 0 && alert('偶数');

    </script>

</body>

</html>